<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap-排版</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
    <!-- 内联子标题 -->
    <h1>爱创课堂<small>前端web<small>第一堂</small></small></h1>
    <!-- 主体副本 -->
    <p class="lead">文章内容文章内容文章内容文章内容文章内容文章内容</p>
    <!-- 【强调标签】：small  strong   em -->
    <p>文章内容<strong>文章内容</strong><small>文章内容</small><em>文章内容</em>文章内容文章内容</p>
    <!-- 对齐类 -->
    <p class="text-right">文章内容文章内容文章内容文章内容文章内容文章内容</p>
    <p class="text-center">文章内容文章内容文章内容文章内容文章内容文章内容</p>
    <p class="text-left">文章内容文章内容文章内容文章内容文章内容文章内容</p>

    <!-- 强调类  添加颜色 -->
    <!-- 字体颜色 -->
    <p class="text-danger">文章内容文章内容文章内容文章内容文章内容文章内容</p>
    <p class="text-success">文章内容文章内容文章内容文章内容文章内容文章内容</p>
    <p class="text-muted">文章内容文章内容文章内容文章内容文章内容文章内容</p>
    <p class="text-primary">文章内容文章内容文章内容文章内容文章内容文章内容</p>
    <p class="text-info">文章内容文章内容文章内容文章内容文章内容文章内容</p>
    <p class="text-warning">文章内容文章内容文章内容文章内容文章内容文章内容</p>
    <!-- 背景颜色 -->
    <p class="bg-danger">文章内容文章内容文章内容文章内容文章内容文章内容</p>
    <p class="bg-success">文章内容文章内容文章内容文章内容文章内容文章内容</p>
    <p class="bg-primary">文章内容文章内容文章内容文章内容文章内容文章内容</p>
    <p class="bg-info">文章内容文章内容文章内容文章内容文章内容文章内容</p>
    <p class="bg-warning">文章内容文章内容文章内容文章内容文章内容文章内容</p>
    <p>文章内容文章内容文章内容文章内容文章内容文章内容</p>
   
</body>
</html>